<template>
	<view class="box">
		<view class="item">
			<u--image mode="aspectFit" :showLoading="true" src="https://cdn.uviewui.com/uview/album/1.jpg"
				width="750rpx"></u--image>
		</view>
		<view class="item-header">
			<view class="name">商品通用现金券-50元(兑换前看详情)</view>
			<!-- <u--text text="带风机不锈钢电子脉冲打火醇油猛火灶aaaaaaa" :lines="2" size=12></u--text> -->
			<view class="bottom">
				<u--text text="18000" color="#F21E46" size=26 lineHeight="1em"></u--text>
				<u--text text="积分" color="#767676" size=12 margin="0 0 0 10rpx"></u--text>
				<u-icon name="plus-circle-fill" color="#2979ff" size="28"></u-icon>
			</view>
		</view>
		<view class="content">
			<view style="text-align: center;">商品详情</view>
			<view style="margin-top: 20rpx;">
				<u--image mode="scaleToFill" :showLoading="true"
					src="https://gitee.com/XM1126/chunqing-miniprogram/raw/master/static/products/jfdh.jpg" width="670rpx"
					height="2500rpx"></u--image>
			</view>
		</view>
		<view class="bottom-btn">
			<u-button text="立即兑换" @click="gotoBuy" size="large" color="#F21E46"></u-button>
		</view>
	</view>
</template>
<script >
</script>
<style lang="scss" scoped>
::v-deep text {
	white-space: normal !important;
}

.box {
	background-color: #F4F5F7;
	min-height: 100%;

}

.item {
	width: 100%;
	background-color: white;
	padding-bottom: 40rpx;
}

.item-header {
	padding: 20rpx;
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	box-shadow: 0 -3px 10px -2px rgba(0, 0, 0, .1);
	margin-top: -10px;
	position: relative;

	.name {
		font-weight: bold;
	}

	.bottom {
		display: flex;
		flex-direction: row;
		margin-top: 30rpx;

		::v-deep .u-text__value {
			white-space: nowrap !important;
			align-self: flex-end;
		}

		::v-deep .u-text {
			flex: 0;
		}

		::v-deep .u-icon {
			margin-left: auto;
		}
	}
}

.content {
	background-color: #fff;
	padding: 40rpx;
	margin-top: 20rpx;
}

.bottom-btn {
	padding: 20rpx;
	position: fixed;
	bottom: 0;
	background-color: #fff;
	width: 710rpx;
	box-shadow: 0 -3px 10px -2px rgba(0, 0, 0, .1);
}
</style>
